<template>
  <!-- FBA货件明细-->
  <div class="flex-c" style="margin-bottom: 10px">
    <p>SKU数：{{ list.length }} 个</p>
    <a-button size="mini" style="margin-left: 10px" @click="toFbaPrint">打印标签</a-button>
  </div>
  <a-table
    style="margin-top: 10px"
    :scroll="{
      y: 'calc(100vh - 360px)',
      x: '100%',
    }"
    class="table-normal-line"
    :data="list"
    size="mini"
    :summary="true"
    :pagination="false"
    :bordered="{ headerCell: true }"
  >
    <template #columns>
      <a-table-column data-index="sort" title="序号" :width="45" fixed="left">
        <template #cell="{ rowIndex }">
          <p>{{ rowIndex + 1 }}</p>
        </template>
      </a-table-column>
      <a-table-column data-index="img" title="图片" :width="60" fixed="left">
        <template #cell="{ record }">
          <ImgPopover :src="record.productImg">
            <template #con>
              <a-image width="40" height="40" fit="contain" :src="record.productImg" />
            </template>
          </ImgPopover>
        </template>
      </a-table-column>
      <a-table-column title="SKU/类目" :width="100" fixed="left">
        <template #cell="{ record }">
          <ShowSpuDetailBySku :val="record.sku" :showLimit="true" :rows="1" />
          <p>{{ record.cateName }}</p>
        </template>
      </a-table-column>
      <a-table-column title="MSKU/ASIN" :width="100" fixed="left">
        <template #cell="{ record }">
          <TextLimit :rows="1">{{ record.msku }}</TextLimit>
          <TextLimit :rows="1">{{ record.asin }}</TextLimit>
        </template>
      </a-table-column>
      <a-table-column data-index="fnsku" title="FNSKU" :width="100" />
      <a-table-column data-index="salesmanName" title="销售员" :width="70" />
      <a-table-column data-index="packageName" title="包装" :width="100">
        <template #cell="{ record }">
          <TextLimit :rows="1">{{ record.packageName || '--' }}</TextLimit>
          <TextLimit :rows="1">{{ record.packageSku || '--' }}</TextLimit>
        </template>
      </a-table-column>
      <a-table-column data-index="remark" title="产品备注" :width="100">
        <template #cell="{ record }">
          <TextLimit>{{ record.remark || '--' }}</TextLimit>
        </template>
      </a-table-column>

      <a-table-column data-index="realNum" title="发货数" :width="80">
        <template #cell="{ record, rowIndex }">
          <div class="flex-c-sb">
            <p>{{ record.realNum }}</p>
            <icon-edit v-if="fbaDetail.status == 'DRAFT' || fbaDetail.status == 'INBOX'" @click="openUpdateNum(rowIndex)" class="edit-icon cursor" />
          </div>
        </template>
      </a-table-column>
      <a-table-column data-index="receiveNum" title="入库数" :width="60" />
      <a-table-column data-index="diffNum" title="差异" :width="60">
        <template #cell="{ record }">
          <p>{{ Number(record.realNum || 0) - Number(record.receiveNum || 0) }}</p>
        </template>
      </a-table-column>
      <a-table-column data-index="shipFee" title="运费" :width="80">
        <template #cell="{ record }">
          <p>￥{{ record.shipFee }}</p>
        </template>
      </a-table-column>
      <a-table-column data-index="laborCost" title="处理费" :width="80">
        <template #cell="{ record }">
          <p>￥{{ record.laborCost }}</p>
        </template>
      </a-table-column>
      <a-table-column data-index="price" title="单价" :width="80">
        <template #cell="{ record }">
          <p>￥{{ record.price }}</p>
        </template>
      </a-table-column>
      <a-table-column data-index="productValue" title="货值" :width="80">
        <template #cell="{ record }">
          <p>￥{{ record.productValue }}</p>
        </template>
      </a-table-column>
      <a-table-column data-index="receiveValue" title="入库货值" :width="80">
        <template #cell="{ record }">
          <p>￥{{ record.receiveValue }}</p>
        </template>
      </a-table-column>
      <a-table-column data-index="packageNum" title="包装数" :width="80">
        <template #cell="{ record }">
          <p>{{ record.realNum }}</p>
        </template>
      </a-table-column>
      <a-table-column title="包装单价" :width="80">
        <template #cell="{ record }">
          <p>￥{{ record.packagingPrice }}</p>
        </template>
      </a-table-column>
      <a-table-column data-index="packagingValue" title="包装成本" :width="80">
        <template #cell="{ record }">
          <p>￥{{ record.packagingValue }}</p>
        </template>
      </a-table-column>
    </template>
    <template #summary-cell="{ column, record }">
      <p v-if="column.dataIndex == 'sku'">合计</p>
      <p v-else-if="['realNum', 'receiveNum', 'productInventory', 'packageInventory'].includes(column.dataIndex)">{{ record[column.dataIndex] }}</p>
      <p v-else-if="['shipFee', 'laborCost', 'productValue', 'receiveValue', 'packagingValue'].includes(column.dataIndex)">￥{{ record[column.dataIndex].toFixed(4) }}</p>
      <p v-else-if="['packageNum'].includes(column.dataIndex)">{{ record.realNum }}</p>
      <p v-else-if="['diffNum'].includes(column.dataIndex)">{{ Number(record.realNum || 0) - Number(record.receiveNum || 0) }}</p>
    </template>
  </a-table>
  <!-- 编辑发货数 -->
  <UpdateFbaNum v-if="showUpdateNum" :fbaDetail="fbaDetail" :currentIndex="currentIndex" :isShow="showUpdateNum" @closed="showUpdateNum = false" @success="updateSuccess" />
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { PropType } from 'vue'
  import UpdateFbaNum from '@/views/purchase/fbaManagement/components/updateFbaNum.vue'
  import { useRouter } from 'vue-router'
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    fbaDetail: {
      type: Object,
      default: () => {},
    },
    list: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
  })
  const emit = defineEmits(['success'])

  const currentIndex = ref(0)
  const router = useRouter()
  const showUpdateNum = ref(false)

  // 编辑发货数
  function openUpdateNum(index: number) {
    currentIndex.value = index
    showUpdateNum.value = true
  }
  // 去打印标签
  function toFbaPrint() {
    window.sessionStorage.setItem('fbaPrintLabelId', props.fbaDetail.id)
    router.push('/warehouse/fbaDelivery/fbaPrintLabel')
  }
  // 编辑数量成功
  function updateSuccess() {
    emit('success')
  }
</script>
<style lang="less" scoped>
  .edit-icon {
    flex-shrink: 0;
    margin-left: 5px;
    display: none;
    font-size: 16px;
  }
  :deep(.arco-table-tr) {
    &:hover .edit-icon {
      display: inline-block;
    }
  }
</style>
